<template>
  <el-card class="layout-home">
    <el-carousel :interval="0" arrow="never" ref="carousel" :initial-index="activeIndex" height="600px"
                 trigger="click" autoplay="false">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div v-html="item.content" class="carousel-content"></div>
      </el-carousel-item>
    </el-carousel>
    <div class="button-container">
      <el-button @click="goToPrev" :disabled="isFirstItem || isAnimating" class="carousel-button">上一步</el-button>
      <el-button @click="goToNext" :disabled="isLastItem || isAnimating" class="carousel-button">下一步</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

const carousel = ref<any>(null);
const activeIndex = ref(0);
const isAnimating = ref(false); // Add a ref to track animation state

const carouselItems = [
  {
    content: `
      <h2>欢迎使用本程序</h2>
      <p class="normal-paragraph">本程序目的旨在帮助用户在投递简历的过程中提供遍历，筛选出最符合的岗位供用户投递，以下是介绍与教程：</p>
      <p class="normal-paragraph">简历投递模块，需要填写您的对岗位的预期，建议能填不限的就填不限</p>
      <div class="image-container" style="max-width: 50%; max-height: 50%; margin: auto;">
        <img src="public/jianlitoudi.png" alt="简历投递模块" style="max-width: 100%; height: auto;">
      </div>
    `
  },
  {
    content: `
      <p class="normal-paragraph">其中城市需要以斜杠(“/”)的方式间隔开来</p>
      <p class="normal-paragraph">喜欢的岗位部分则是boss中个人已经设定的部分，如下图。这样方便更好的检索。</p>
      <div class="flex-container">
        <div class="flex-item">
          <img src="public/likeganwei.jpg" alt="喜欢的岗位部分" style="max-width: 100%; max-height: 100%; height: auto;">
        </div>
        <div class="flex-item">
          <img src="public/ganwei.jpg" alt="喜欢的岗位部分" style="max-width: 100%; height: auto;">
        </div>
      </div>
    `
  },
  {
    content: `
      <p class="normal-paragraph">关键词部分则以中文逗号分隔，对应的是选择的大岗位下的能接受的工作种类，如图:</p>
      <div class="image-container" style="max-width: 70%; max-height: 70%; margin: auto;">
        <img src="public/guanjianci.jpg" alt="关键词部分" style="max-width: 100%; height: auto;">
      </div>
    `
  },
  {
    content: `
      <p class="normal-paragraph">求职期望如下，填写对岗位的预期，将人工智能的方式进行匹配，不填也行。</p>
      <div class="image-container" style="max-width: 70%; max-height: 70%; margin: auto;">
        <img src="public/qiuzhiqiwang.jpg" alt="求职期望" style="max-width: 100%; height: auto;">
      </div>
    `
  },
  {
    content: `
      <p class="normal-paragraph">以下是投递操作，注意打招呼操作会在关闭小窗口后失效：</p>
      <div class="image-container" style="max-width: 70%; max-height: 70%; margin: auto;">
        <img src="public/toudi-log.jpg" alt="投递日志" style="max-width: 100%; height: auto;">
      </div>

    `
  },
  {
    content: `
      <p class="normal-paragraph">以下简历投递的控件：可以暂停和结束程序</p>
      <div class="image-container" style="max-width: 70%; max-height: 70%; margin: auto;">
        <img src="public/konjian.jpg" alt="投递控件" style="max-width: 100%; height: auto;">
      </div>

    `
  }
];

// Function to navigate to previous item
const goToPrev = () => {
  if (!isAnimating.value) { // Check if not currently animating
    isAnimating.value = true;
    activeIndex.value = Math.max(activeIndex.value - 1, 0);
    setTimeout(() => {
      isAnimating.value = false; // Reset animation state after timeout
    }, 500); // Adjust timeout as needed to match carousel animation duration
  }
};

// Function to navigate to next item
const goToNext = () => {
  if (!isAnimating.value) { // Check if not currently animating
    isAnimating.value = true;
    activeIndex.value = Math.min(activeIndex.value + 1, carouselItems.length - 1);
    setTimeout(() => {
      isAnimating.value = false; // Reset animation state after timeout
    }, 500); // Adjust timeout as needed to match carousel animation duration
  }
};

// Watch for changes in activeIndex and update carousel index
watch(activeIndex, () => {
  if (carousel.value) {
    carousel.value.setActiveItem(activeIndex.value);
  }
});

// Computed properties for button disable states
const isFirstItem = computed(() => activeIndex.value === 0);
const isLastItem = computed(() => activeIndex.value === carouselItems.length - 1);
</script>

<style scoped>
.layout-home {
  line-height: 1.6;
  font-size: 16px;
  padding: 20px;
}

.layout-home h2 {
  margin: 16px 0;
  color: #333;
}

.layout-home p {
  color: #666;
  margin: 12px 0;
  text-align: left; /* Ensure paragraphs are left-aligned */
  text-indent: 2em; /* Indent the first line of each paragraph */
}

.image-container {
  max-width: 100%;
  max-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.image-container img {
  max-width: 100%;
  height: auto;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.carousel-button {
  padding: 10px 20px;
  font-size: 14px;
}
</style>
